iT邦幫忙

2026 iThome 鐵人賽

DAY 20
0
Vibe Coding

從 0 到 1: 產品設計師用 Vibe Coding 打造呼吸放鬆 App系列 第 20 篇

Day 20 | 為自己開發的 App 做一次體驗測試後,我推翻了在 PRD 的決策

  • 分享至 

  • xImage
  •  

https://ithelp.ithome.com.tw/upload/images/20260930/20183825vH1VCSDNrL.png

前言

在 Day 19 我們在 iPhone 裝好在 Xcode 上開發的第一版 App,心中充滿悸動,總算是完成第一個里程碑,我想這就是做東西時純粹的樂趣,那種感覺就像是自己看了某個料理食譜想要嘗試來試作,做完恨不得馬上試吃第一口,吃下去當下會告訴自己 God 還真不錯XD

使用體驗心得

安裝完後第一天,我先隨機使用兩個呼吸法,在功能上已經滿足我想要練習呼吸的基本需求了,也許是新鮮感,用起來覺得更能專注在練習。分享我整個使用體驗旅程的摘要心得。

<主畫面>

  • 喜歡藍天白雲的動態感,讓人感覺舒服平靜。
  • 感受按鈕的 Layout 預期是水平排列,但實際裝到手機上變成垂直,導致與底部導航選單重疊(原因見下方「預期與落差 2」)。

https://ithelp.ithome.com.tw/upload/images/20260930/20183825JoSgdRqUpn.png

<選擇練習呼吸模式>

  • 點擊每個按鈕當下,背景都會有個光影動畫的感覺會擴散到整個卡片,效果有點過於突兀

<練習當下>

  • 目前練習時只有背景音樂和觸覺,沒有提示吸氣、吐氣的聲音,所以一開始需要睜開眼睛,看現在是吸氣、屏氣還是吐氣,跟著做 2–3 輪後才慢慢閉上眼睛練習(詳見下方「預期與落差 1」)。

<練習完後>

  • 需紀錄當下感覺,思考文字之外似乎也能改用 emoji 像是皮克敏選擇心情的方式,畢竟有時候會懶得打字,emoji 可以更迅速地幫我表達。

https://ithelp.ithome.com.tw/upload/images/20260930/20183825oJ392IgzLa.png

預期與落差 1:只有觸覺,教不會我呼吸節奏

當初的決定

在 Day 9 整理 PRD 時,我把人聲引導移到了 backlog。當時的想法是:自己錄音需要另外準備,而閉眼練習時,用不同的觸覺回饋區分吸氣、吐氣應該就夠了,至於實際跟不跟得上,要等真機測試再驗證。

實際感受

真的在手機上練習後,前 2–3 輪我還是得睜開眼睛,看畫面上現在是吸氣、屏氣還是吐氣,跟著做幾輪抓到節奏後,才能慢慢閉上眼。沒有聲音引導,一開始會點不知所措的感覺。

回頭看程式碼:觸覺是怎麼設計的?

我詢問了 AI 了解觸覺在程式上怎去定義行為(PracticeSystemOutputs.swift),整理成下表:

呼吸階段 觸覺行為
吸氣(含循環呼吸的補吸) 整段持續震動,強度由弱漸強
吐氣 整段持續震動,強度由強漸弱
屏氣、吐氣後停頓 開頭輕點一下,之後完全安靜
case .inhale, .topUpInhale:
    return try continuous(from: 0.2, to: 0.6)   // 吸氣:強度 0.2 漸強到 0.6
case .exhale:
    return try continuous(from: 0.5, to: 0.1)   // 吐氣:強度 0.5 漸弱到 0.1

整理後才發現,吸氣和吐氣都是「一直在震」,差別只在震動是變強還是變弱。身體要先感受幾輪才能學會這套規則。另外因為模擬器根本沒有觸覺,AI 這部分它驗證不了實際感覺,只能交給人親自體驗。

決定:把人聲引導從 backlog 拉回來 + 實驗調整觸覺強度

目前的判斷是:觸覺可以輔助,但光靠它不夠,還是需要人聲引導才會讓體驗更完整。接下來要想清楚的是,人聲要全程帶著練習,還是只帶前幾輪、等我抓到節奏就安靜下來;以及要用系統的合成語音,還是自己錄音。

預期與落差 2:模擬器上沒問題,真機卻跑版

發生什麼事

首頁的三個感受按鈕,在模擬器上是水平排成一列,裝到我的 iPhone 16e 上卻變成垂直排列。我原本以為是開發時設定選到 iPhone 17 造成的跑版,請 AI 一起看程式碼。

原因:AI 預先寫好的「備案」

在 HomeView.swift 裡,AI 寫了一個「放不下就換排法」的規則:

ViewThatFits(in: .horizontal) {
    HStack(spacing: 8) { feelingButtons }                        // 先試水平排
    VStack(alignment: .leading, spacing: 12) { feelingButtons }  // 放不下就改垂直排
}

由於開發時疏忽,使用到 iPhone 17 模擬器,螢幕寬度約 402pt,扣掉左右邊距後,三顆按鈕剛好放得下,所以是水平排;我的 iPhone 16e 寬度約 390pt,少了大約 12pt,放不下,程式就照規則改成垂直排。

決定:重新定義寬度排版規則

調整排版,讓比較窄的螢幕也能維持水平排列,設定螢幕寬度規則,讓在各種 iPhone 機型上 layout 維持一致。

下一步:持續試用 5 天與迭代產品

接下來要開始迭代修正這些問題:

  • 加入人聲引導
  • 首頁感受按鈕在 iPhone 16e 上維持水平排列
  • 調整選擇呼吸法時過於突兀的光影動畫
  • 練習後的心情紀錄,加入 emoji 選項
  • 持續試用發現 Bug
  • 優化 UI

上一篇
Day 19 | 如何在 iPhone 上安裝 Xcode 開發好的 App 做測試
下一篇
Day 21 | 用 AI 做 UI 插畫
系列文
從 0 到 1: 產品設計師用 Vibe Coding 打造呼吸放鬆 App 共 21 篇
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言